<template>
  <div class="userTitle">
    <div class="logo">
      <span>API后台管理系统</span>
    </div>
    <div class="cont">
      <div class="info" @mouseover="showInfo=true" @mouseout="showInfo=false">
        <b class="head">
          Y
        </b>
        <span>{{ userInfo }}</span>
        <a class="el-icon-arrow-down"></a>
        <transition :name="showInfo ? 'el-fade-in-linear' : 'el-fade-in'">
          <ul class="operate" :class="{ 'fadeIn': showInfo, 'fadeOut': !showInfo }" v-show="showInfo">
            <li @click="logout">
              <i class="el-icon-upload2"></i>
              <span>退出登录</span>
            </li>
          </ul>
        </transition>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
export default {
  name: 'userTitle',
  data () {
    return {
      showPass: false,
      showInfo: false,
      task: false,
      moneyObj: {},
      fixPassObj: {
        oldpass: '',
        newpass1: '',
        newpass2: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    logout () {
      this.$confirm('确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push({ name: 'login' })
      }).catch((err) => {
        if (err) {
          this.$message({
            message: '生意太火爆了, 请稍后再试',
            type: 'error'
          })
        }
      })
    },
    getPrice () {
      this.$axios.post('/api/platform/getBalance', {
        userAccountId: this.userInfo.platformAccountId
      }).then((data) => {
        if (data.data.code === '200') {
          this.moneyObj = data.data.data
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch(() => {
        this.$message.error('服务器错误！')
      })
    }
  },
  mounted () {
    // this.getPrice()
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.userTitle
  position relative
  z-index 998
  height 60px
  font-size 12px
  background #0A1727
  color #ffffff
  display flex
  justify-content space-between
  align-items center
  .logo
    padding 0 40px
    span
      font-size 20px
      font-weight bold
  .cont
    display flex
    line-height 100%
    // width 150px
    width auto
    height 100%
    text-align right
    padding 0 20px
    .price
      margin-right 20px
      span
        margin-right 10px
      em
        cursor pointer
        color #409EFF
    >div
      line-height 60px
    .record
      margin-right 24px
      font-size 12px
      color #525F75
      line-height 1
      i, strong
        vertical-align middle
    .info
      cursor pointer
      position relative
      .head
        display inline-block
        width 19px
        height 19px
        margin-right 10px
        border 1px solid #000000
        border-radius 50%
        background #000000
        line-height 20px
        text-align center
        color #ffffff
        font-weight bold
      .operate
        position fixed
        top 60px
        right 0
        z-index 999
        width 180px
        background #ffffff
        text-align left
        transition all 0.3s
        box-shadow 0 2px 4px rgba(82, 95, 117, 0.18)
        li
          height 50px
          line-height 50px
          font-size 14px
          color #525F75
          i
            display inline-block
            width 20px
            height 20px
            margin 0 20px
          &:hover
            background #EEF8FF
  .alert
    .list
      padding 0 20px 0 40px
      font-size 14px
      color #525F75
      margin-top 20px
      span
        display inline-block
        min-width 100px
        text-align right
        margin-right 20px
</style>
